import { useState, useCallback } from "react";
import "./Room.scss";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from "react-responsive-carousel";

export default function Room(props) {
  const { RoomMain, handleState, focus, blurState, index, handleRoomIndex } = props;

  const [text, setText] = useState("");

  const handleText = useCallback((text) => {
    setText(text);
  }, []);

  return (
    <div className="room">
      <header>{text}</header>
      <main>
        <RoomMain
          handleText={handleText}
          Carousel={Carousel}
          handleState={handleState}
          index={index}
          handleRoomIndex={handleRoomIndex}
        />
      </main>
      <footer>
        {focus && (
          <button class="menu-button" onClick={() => handleState(blurState)}>
            回到视角
          </button>
        )}
      </footer>
    </div>
  );
}
